<template>
    <div>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{age+5}}</h2>
        <button @click="sendStuName">点我传值</button>
        <button @click="unbind">解绑事件</button>
        <button @click="death">销毁实例</button>
    </div>
</template>

<script>
export default {
    name:'Student',
    data() {
        return {
            name:'张三',
            age:18
        }
    },
    methods:{
        sendStuName(){
            // console.log(this);
            // 触发student组件实例上的自定义事件test
            // 第二个参数传值两种方式：
                // 1.字符串，逗号分隔
                // 2.对象传递
            this.$emit('test',{name:this.name,a:111,b:222,c:333})
            this.$emit('demo',this.age)
        },
        unbind(){
            // 解绑一个自定义事件
            // this.$off('test')
            // 解绑多个自定义事件
            // this.$off(['test','demo'])
            // 解绑所有自定义事件
            this.$off()
        },
        death(){
            this.$destroy()
        }
    }
}
</script>
<style scoped>
/* scoped 定义局部样式 */
    div{
        background-color: red;
    }
</style>